<template>
  <div class="periphery-view">
    <div class="container">
      <h1 class="page-title">周边商城</h1>
      
      <!-- 搜索和筛选区域 -->
      <div class="search-filter-container">
        <div class="search-box">
          <input 
            v-model="searchQuery" 
            type="text" 
            placeholder="搜索周边商品..." 
            @input="handleSearch"
          />
        </div>
        <div class="filter-buttons">
          <button 
            v-for="category in categories" 
            :key="category"
            :class="['filter-btn', { active: activeCategory === category }]"
            @click="activeCategory = category"
          >
            {{ category }}
          </button>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="products-container">
        <div 
          v-for="product in filteredProducts" 
          :key="product.id" 
          class="product-card"
        >
          <div class="product-image">
            <img :src="product.image" :alt="product.name" />
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ product.name }}</h3>
            <div class="product-price">¥{{ product.price }}</div>
            <div class="product-rating">
              <span v-for="n in 5" :key="n" class="star">
                {{ n <= product.rating ? '★' : '☆' }}
              </span>
              <span class="rating-count">({{ product.reviewCount }})</span>
            </div>
            <div class="product-category">{{ product.category }}</div>
            <button class="add-to-cart-btn">加入购物车</button>
          </div>
        </div>
      </div>

      <!-- 空状态显示 -->
      <div v-if="filteredProducts.length === 0" class="empty-state">
        <p>暂无符合条件的周边商品</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PeripheryView',
  data() {
    return {
      searchQuery: '',
      activeCategory: '全部',
      categories: ['全部', '动漫', '游戏', '音乐', '影视', '其他'],
      products: [
        {
          id: 1,
          name: '鬼灭之刃炭治郎手办',
          price: 299,
          image: '/src/assets/鬼灭之刃.jpeg',
          rating: 5,
          reviewCount: 238,
          category: '动漫',
        },
        {
          id: 2,
          name: '黑神话悟空钥匙扣',
          price: 49,
          image: '/src/assets/黑神话.jpeg',
          rating: 4,
          reviewCount: 156,
          category: '游戏',
        },
        {
          id: 3,
          name: '周杰伦演唱会T恤',
          price: 199,
          image: '/src/assets/周杰伦.png',
          rating: 5,
          reviewCount: 421,
          category: '音乐',
        },
        {
          id: 4,
          name: '悟空手办限量版',
          price: 399,
          image: '/src/assets/悟空.jpg',
          rating: 5,
          reviewCount: 189,
          category: '游戏',
        },
        {
          id: 5,
          name: '二次元美食节主题徽章',
          price: 39,
          image: '/src/assets/二次元美食节海报_3.jpg',
          rating: 4,
          reviewCount: 123,
          category: '其他',
        },
        {
          id: 6,
          name: '科技数码展周边笔记本',
          price: 59,
          image: '/src/assets/科技数码展宣传图.jpg',
          rating: 4,
          reviewCount: 98,
          category: '其他',
        },
        {
          id: 7,
          name: '黑悟空卫衣',
          price: 259,
          image: '/src/assets/黑悟空.jpg',
          rating: 5,
          reviewCount: 215,
          category: '游戏',
        },
        {
          id: 8,
          name: '动漫角色抱枕',
          price: 129,
          image: '/src/assets/动漫.png',
          rating: 4,
          reviewCount: 176,
          category: '动漫',
        },
        {
          id: 9,
          name: '喜剧电影周边马克杯',
          price: 89,
          image: '/src/assets/喜剧电影.jpeg',
          rating: 3,
          reviewCount: 67,
          category: '影视',
        },
      ],
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        const matchesSearch = product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
        const matchesCategory = this.activeCategory === '全部' || product.category === this.activeCategory
        return matchesSearch && matchesCategory
      })
    },
  },
  methods: {
    handleSearch() {
      // 搜索逻辑已在computed中处理
    },
  },
}
</script>

<style scoped>
.periphery-view {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

.search-filter-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.search-box {
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 12px 20px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s;
}

.search-box input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.filter-btn:hover {
  background: #f8f9fa;
  border-color: #007bff;
}

.filter-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.products-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-info {
  padding: 16px;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
  line-height: 1.4;
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  font-size: 20px;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 8px;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 14px;
}

.star {
  color: #ffc107;
}

.rating-count {
  color: #666;
  margin-left: 8px;
}

.product-category {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
  padding: 2px 8px;
  background: #f8f9fa;
  border-radius: 12px;
  display: inline-block;
}

.add-to-cart-btn {
  width: 100%;
  padding: 10px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.add-to-cart-btn:hover {
  background: #218838;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .products-container {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  
  .filter-buttons {
    justify-content: flex-start;
  }
  
  .page-title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .periphery-view {
    padding: 15px;
  }
  
  .products-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .product-image {
    height: 180px;
  }
}
</style>